<template>
    <div v-if="visible">
        <el-drawer title="添加学员" :append-to-body="true" :before-close="handleClose" :size="600" :visible.sync="visible"
                   direction="rtl" custom-class="drawer" :destroyOnClose="true" ref="drawer">
            <div class="drawer__content" v-loading="loading">
                <el-row>
                    <el-form :model="formSearch" ref="form" :inline="true">
                        <el-form-item>
                            <el-input placeholder="请输入学员名称" clearable="" v-model="formSearch.nickname"
                                      class="input-with-select">
                                <el-button @click="search" slot="append" icon="el-icon-search">
                                </el-button>
                            </el-input>
                        </el-form-item>
                        <el-link type="primary" style="top:5px;" @click="addStudent">创建</el-link>
                    </el-form>
                </el-row>
                <el-row>
                    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" row-key="id"
                              style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column prop="nickname" label="学员姓名" width="120" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="account" label="员工账号">
                        </el-table-column>
                        <el-table-column prop="status" label="状态">
                        </el-table-column>
                        <el-table-column prop="course" label="课程消耗">
                        </el-table-column>
                    </el-table>

                    <div class="block">

                        <el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNumber"
                                       :page-size="pageInfo.pageSize" background layout="total, prev, pager, next"
                                       :total="pageInfo.total">
                        </el-pagination>
                    </div>

                </el-row>

                <div class="drawer__footer">
                    <el-button @click="cancelForm" size="mini">取 消</el-button>
                    <el-button type="primary" size="mini" @click="handleSubmit">保存</el-button>
                </div>
            </div>

        </el-drawer>
        <AddForm v-if="showForm" :visible.sync="showForm" @handleReload="init()" :id="editId" :key="`${editId}`" />
    </div>
</template>
<script>
import { getStudentList, deleteStudent } from '@/api/kanke/student'
import {assignStudent} from "@/api/kanke/gradeclass/gradeclass";
import AddForm from "@/views/kanke/education/student/components/AddForm";
export default {
    name: 'AddStudent',
    components: {
        AddForm,
    },
    props: {
        visible: {
            type: Boolean,
        },
        ids: {
            type: Array,
            default: []
        },
        class_id: {
            //type: Number,
            default: 0
        },
        handleReload: {
            type: Function
        }
    },
    data() {
        return {
            loading: false,
            form: {
                class_id: '',
            },
            rules: {
            },
            formLabelWidth: '100px',
            dialog: true,
            tableData: [],
            formSearch: {},
            formShow: {
                id: 0,
                class_names: '',
                class_ids: '',
            },
            pageInfo: {
                pageNumber: 1,
                pageSize: 10,
                total:0
            },
            class_list: [],
            // 选中的班级
            multipleSelection: [],
            //创建学员
            showForm:false
        }
    }, 
    created() {
        this.init();
    },
    updated: function () {
        if(this.ids.length>0){
            this.tableData.forEach(row => {
                if(this.ids.includes(parseInt(row.id))){
                    this.$refs.multipleTable.toggleRowSelection(row);
                }
            });
        }
    },
    methods: {
        init() {
            this.loading = true
            this.formSearch.class_id = 0;
            getStudentList({ ...this.formSearch, ...this.pageInfo }).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.pageInfo.total = res.data.total
                }
                this.loading = false
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false);
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        cancelForm() {
            this.$emit('update:visible', false);
        },
        handleSubmit() {
            if(this.multipleSelection.length==0){
                this.$message('未选择老师');
                return false;
            }
            let arr = [];
            for(let i=0;i<this.multipleSelection.length;i++){
                arr.push(this.multipleSelection[i].id);
            }
            const params = {
                arr_ids: arr,
                class_id: this.class_id
            }
            //班级添加学员
            assignStudent(params).then(res => {
                if (res.code == 200) {
                    this.$emit('update:visible', false);
                    this.$message.success(res.msg);
                    this.$emit('handleReload');
                    this.init();
                }else{
                }
            })
        },
        addStudent(){
            this.showForm = true
        },
        search() {
            this.init();
            // this.loading = true
            // this.pageInfo.pageNumber = 1
            // this.formSearch.class_id = 0;
            // getStudentList({ ...this.formSearch, ...this.pageInfo }).then(res => {
            //     if (res.code == 200) {
            //         this.tableData = res.data.list
            //         this.pageInfo.total = res.data.total
            //     }
            //     this.loading = false
            // })
        },
        handleCurrentChange(e) {
            this.pageInfo.pageNumber = e;
            this.init();
        }
    }
}
</script>
<style lang="scss" scoped>
.drawer {
    &__content {
        padding: 20px;
        margin-bottom: 30px;

        ::v-deep .el-select .el-input {
            width: 200px;
        }

        ::v-deep .el-icon-close {
            padding-left: 10px;
        }
    }

    &__footer {
        margin-top: 20px;
        margin-left: 50px;
    }
}
</style>